antd Datepicker组件 |
您所在的位置：网站首页 › antd select options › antd Datepicker组件 |
antd Datepicker组件
|
目前下来，遇到这个报错好几次了，大致总结一下出现的情况和解决方法 1. 日期格式转换可参照 推荐博文 中：4、日期处理函数，5、moment.js JavaScript 日期处理类库 2. DatePicker 中回显数据背景说明：根据返回的 json 数据（格式：[{}, {}, …]），通过 map 函数循环显示所有数据项，其中包含日期类型数据，需要回显到 DatePicker 中 2.2 主要部分关于日期在 Datepicker 中回显，默认值有三种方式：defaultValue、value、initValue，要求的参数格式为 moment。因此在数据回显时，一般都需要将日期转换成 moment 格式。 需要注意的是：默认值会在页面渲染的时候就渲染在 Form.Item 中，但是一般数据请求拿到返回值存在异步，会晚于渲染，因此日期格式转换的操作不能放在 DatePicker 中，下面这些处理方式是不对的 1. dom = { width: 300 }} />2. dom = { width: 300 }} />3. dom = { width: 300 }} />正确的日期处理，应该放在获取数据之后： 1、拿到数据之后，对数据进行格式处理，转换成 moment 格式 formBaseData = {startDate: editData.startDate ? moment(editData.startDate) : null } formBaseData = { ...editData, ...formBaseData } form.setFieldsValue(formBaseData)2、将格式修改之后的数据绑定到 DatePicker 中 dom = { width: 300 }} />效果图： 代码：form 表单显示 return ( span: 10 }} wrapperCol={{ span: 25 }} layout="inline" size="small"form={form} initialValues={{ modifier: 'public' }}onChange={()=>{let values = form.getFieldsValue()changeSubmitData(values, 'editData')}}>{formData.map((obj, index) => {return (obj.title}key={index}style={{ marginTop: 10, width: '45%' }}>{inputType(obj)})})} )代码：数据项处理 const inputType = (data: any) => {let dom;let select1,select2,select3,select4;if (data.type && isEdit) {switch (data.type) {case 'select':dom = (value, option) => selectChange(value, option, data.title)} style={{ width: 300 }}>{ guarderDeptData.map((item) => item.id} value={item.name}>{item.name}) }break;case 'date':dom = { width: 300 }} />breakcase 'Radio':dom = 是否break}} else {return { width: 250 }} />}return dom }formBaseData = {isPre: editData.isPre == null ? '' : (editData.isPre == 0 ? '否' : '是'),isJoin: editData.isJoin == null ? '' : (editData.isJoin == 0 ? '否' : '是'),isTjzjfx: editData.isTjzjfx == null ? '' : (editData.isTjzjfx == 0 ? '否' : '是'),// startDate: editData.startDate ? editData.startDate.split('T')[0] : ''startDate: editData.startDate ? moment(editData.startDate) : null } formBaseData = { ...editData, ...formBaseData } form.setFieldsValue(formBaseData) |
【本文地址】